<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>The CheckBox Tree</title>
    <style type="text/css">
      @import "../../../dijit/themes/claro/claro.css";
      @import "../../../dijit/themes/claro/document.css";
      @import "../../../dijit/tests/css/dijitTests.css";
      @import "../../themes/claro/claro.css";
    </style>

		<script type="text/javascript">
			var dojoConfig = {
						async: true,
						parseOnLoad: true,
						isDebug: false,
						baseUrl: "../../../",
						packages: [
							{ name: "dojo",  location: "dojo" },
							{ name: "dijit", location: "dijit" },
							{ name: "cbtree",location: "cbtree" }
						]
			};
		</script>

		<script type="text/javascript" src="../../../dojo/dojo.js"></script>
		<script type="text/javascript">
			require([
				"dojo/data/ItemFileWriteStore",
				"dojo/parser",
				"cbtree/Tree",                    // Checkbox tree
				"cbtree/models/ForestStoreModel"  // ForestStoreModel
				]);

			var dataObj = { "identifier": "name",
											 "label": "name",
											 "items": [
													{ "name":"Africa", "type":"continent", "children":[
														{ "name":"Egypt", "type":"country" },
														{ "name":"Kenya", "type":"country", "children":[
															{ "name":"Nairobi", "type":"city" },
															{ "name":"Mombasa", "type":"city" } ]
														},
														{ "name":"Sudan", "type":"country", "children":
															{ "name":"Khartoum", "type":"city" }
														} ]
													},
													{ "name":"Asia", "type":"continent", "children":[
														{ "name":"China", "type":"country" },
														{ "name":"India", "type":"country" },
														{ "name":"Russia", "type":"country" },
														{ "name":"Mongolia", "type":"country" } ]
													},
													{ "name":"Australia", "type":"continent", "children":
														{ "name":"Commonwealth of Australia", "type":"country"}
													},
													{ "name":"Europe", "type":"continent", "children":[
														{ "name":"Germany", "type":"country" },
														{ "name":"France", "type":"country" },
														{ "name":"Spain", "type":"country" },
														{ "name":"Italy", "type":"country" } ]
													},
													{ "name":"North America", "type":"continent", "children":[
														{ "name":"Mexico", "type":"country", "children":[
															{ "name":"Mexico City", "type":"city" },
															{ "name":"Guadalajara", "type":"city" } ]
														},
														{ "name":"Canada", "type":"country", "children":[
															{ "name":"Ottawa", "type":"city"},
															{ "name":"Toronto", "type":"city"}]
														},
														{ "name":"United States of America", "type":"country" } ]
													},
													{ "name":"South America", "type":"continent", "children":[
														{ "name":"Brazil", "type":"country" },
														{ "name":"Argentina", "type":"country" } ]
													}
											]
										};
		</script>
  </head>

  <body class="claro">
    <h1 class="DemoTitle">The CheckBox Tree with Multi State CheckBoxes</h1>
    A basic CheckBox Tree using an in memory JSON object to create the store.
		<div data-dojo-id="store" data-dojo-type="dojo/data/ItemFileWriteStore" data-dojo-props='data:dataObj'></div>
		<div data-dojo-id="model" data-dojo-type="cbtree/models/ForestStoreModel" data-dojo-props='store:store, query:{type:"continent"}, rootLabel:"The Earth"'></div>
    <div data-dojo-id="earthTree", data-dojo-type="cbtree/Tree" data-dojo-props='model:model, id:"earthTree"'>
    </div>
  </body>
</html>